import React from 'react';
import { ProductGroupC, PrimaryC, FirstHeaderC, SecondHeaderC } from '../../../components';
import { Form } from 'antd';

class ProductGroupCDemo extends React.Component {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();

    this.state = {
      init12: undefined,
      init22: undefined,
      loading: true,
    };

    setTimeout(() => {
      this.setState({
        init12: '75',
        init22: ['75', '62'],
        loading: false,
      });
    }, 3000);
  }

  handleOnClick13 = () => {
    this.state.ProductGroupC1.setSelect('62');
  };

  handleOnClick23 = () => {
    this.state.ProductGroupC2.setSelect(['75', '62']);
  };

  render() {
    // console.log(1111, this.formRef);
    return (
      <Form ref={this.formRef}>
        <div style={{ padding: '20px', width: '800px' }}>
          <FirstHeaderC title='单选' />

          <SecondHeaderC title='无初始化,占位符修改' />
          <ProductGroupC
            form={this.formRef.current}
            placeholder={'placeholder参数测试'}
            dataIndex='group11'
            rules={[{ required: true, message: '请选择产品组!' }]}
            helper='helper提示信息'
            onChange={(e) => console.log(e)}
          />

          <SecondHeaderC title='有初始化,禁用' />
          <ProductGroupC initialValue={'75'} form={this.formRef.current} dataIndex='group111' helper='helper提示信息' disabled={true} />

          <SecondHeaderC title='异步初始化' />
          <ProductGroupC form={this.formRef.current} dataIndex='group12' initialValue={this.state.init12} onChange={(e) => console.log(e)} />

          <SecondHeaderC title='非初始化更改选项,不可清空' />
          <ProductGroupC
            allowClear={false}
            form={this.formRef.current}
            dataIndex='group13'
            onChange={(e) => console.log(e)}
            onRef={(ref) => this.setState({ ProductGroupC1: ref })}
          />
          <PrimaryC onClick={this.handleOnClick13} title='更换选项' />

          <div style={{ height: '20px' }}></div>
          <FirstHeaderC title='多选' />
          <SecondHeaderC title='无初始化,多选最多显示3条' />
          <ProductGroupC
            helper='helper提示信息'
            form={this.formRef.current}
            dataIndex='group2'
            rules={[{ required: true, message: '请选择产品组!' }]}
            multiple={true}
            onChange={(e) => console.log(e)}
            maxTagCount={3}
          />

          <SecondHeaderC title='异步初始化' />
          <ProductGroupC form={this.formRef.current} dataIndex='group22' initialValue={this.state.init22} multiple={true} onChange={(e) => console.log(e)} />

          <SecondHeaderC title='非初始化更改选项' />
          <ProductGroupC form={this.formRef.current} dataIndex='group23' onChange={(e) => console.log(e)} multiple={true} onRef={(ref) => this.setState({ ProductGroupC2: ref })} />
          <PrimaryC onClick={this.handleOnClick23} title='更换选项' />
        </div>
      </Form>
    );
  }
}

export default ProductGroupCDemo;
